<template>
  <div class="hello">
    <div id="diagramContainer">
    <div id="item_left"  class="item"></div>
    <div id="item_right" class="item" style="left: 500px;" ></div>
  </div>
  </div>
</template>

<script>
import { jsPlumb } from 'jsplumb'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
      positionX:0,
        positionY:0,
    }
  },
  methods:{
     
    
  },
  mounted() {

    jsPlumb.ready(function () {

      var common = {
        isSource: true,
        isTarget: true,
        endpoint: 'Rectangle',
        connector: ['Bezier'],
      }

      jsPlumb.connect({
        source: 'item_left',
        target: 'item_right',
        paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
        endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },
        overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ]
        },
        common)
      jsPlumb.draggable('item_left')
      jsPlumb.draggable('item_right')

 /*      jsPlumb.addEndpoint('item_left', {
        anchors: ['Right']
      }, common)

      jsPlumb.addEndpoint('item_right', {
        anchor: 'Left'
      }, common)

      jsPlumb.addEndpoint('item_right', {
        anchor: 'Top'
      }, common) */

      

      jsPlumb.draggable('item_left')
      jsPlumb.draggable('item_right')
    })


  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.item{
  position: absolute; 
  color:rgb(255,0,0);
  border:5px solid #F00;
  width:200px; 
  height:100px;
  background-color: #42b983;
  
}

h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
